<template>
  <div class="container">
    <div class="header">经营稼动率</div>
    <div class="echart-container">
      <div ref="echartsBox" class="echarts-box"></div>
    </div>
  </div>
</template>
<script>
  import commomOption from './commomOption.js';
  import { renderItem } from './blockBarInit.js';
  import * as echarts from 'echarts';

  export default {
    created() {
      const option = {
        tooltip: commomOption.tooltip,
        legend: commomOption.legend,
        grid: commomOption.grid,
        xAxis: Object.assign({}, commomOption.xAxis, {
          data: ['1月', '2月', '3月', '4月', '5月'],
        }),
        yAxis: commomOption.yAxis,
        series: [
          {
            name: '最近12个月产量',
            type: 'custom',
            barGap: 0,
            emphasis: {
              focus: 'series',
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(0, 172, 233, .1)',
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(1, 254, 246, 1)' },
                { offset: 1, color: 'rgba(1, 25, 46, 1)' },
              ]),
            },
            renderItem: (params, api) => renderItem(params, api, 0),
            data: [320, 332, 301, 334, 390],
          },
        ],
      };
      this.echartInit(option);
    },
    data() {
      return {
        myChart: null,
      };
    },
    methods: {
      // echarts初始化
      echartInit(option) {
        if (this.myChart) {
          this.myChart.setOption(option);
          return false;
        }

        this.$nextTick(() => {
          this.myChart = echarts.init(this.$refs.echartsBox);

          option && this.myChart.setOption(option);
          // 根据页面大小自动响应图表大小
          window.addEventListener('resize', () => {
            this.myChart.resize();
          });
        });
      },
    },
  };
</script>
<style lang="scss" src="./container.scss" scoped></style>
